<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { View, Search, ChatDotRound, MoreFilled } from '@element-plus/icons-vue'
import { clientPage, type ClientDto } from '@/api/ams'
import ClientChat from './chat.vue'
import logDetail from './logDetail.vue'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'

import { useAmsStore } from '@/stores/ams'

defineOptions({
  name:"Client"
})
const amsStore = useAmsStore()

const searchDto = reactive({
  ip: '',
  hostname: '',
  pageNum: 1,
  pageSize: 10,
})

const tableData = ref<ClientDto[]>([])
const pagination = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1,
})

const showDrawerShow = (row: ClientDto) => {
  amsStore.currClient = row
  amsStore.chatDrawerShow = true
}

const showLogDetailsDialog = (row: ClientDto) => {
  amsStore.currClient = row
  amsStore.logDetailsDialog = true
}

const clickMoreBtn = (row: ClientDto) => {
  console.log(row)
  ElMessage({
    message: '受限制的功能，请联系超管启动相关模块！',
    type: 'warning',
    plain: true,
  })
}
onMounted(() => {
  clickSearchBtn()
})

const clickSearchBtn = () => {
  searchDto.pageNum = 1
  clientPage(searchDto).then((res) => {
    tableData.value = res.list
    pagination.total = res.total
  })
}
</script>

<template>
  <div>
    <ClientChat></ClientChat>
    <logDetail></logDetail>
    <el-row>
      <el-col>
        <el-card>
          <el-row class="mb-5">
            <el-col>
              <el-input
                v-model="searchDto.hostname"
                class="max-w-xs mr-5"
                style="width: 250px"
                placeholder="请输入主机名"
              />
              <el-input
                v-model="searchDto.ip"
                class="max-w-xs mr-5"
                style="width: 250px"
                placeholder="请输入IP地址"
              />
              <el-button type="primary" :icon="Search" @click="clickSearchBtn">查询</el-button>
            </el-col>
          </el-row>
          <el-table :data="tableData" stripe style="width: 100%" show-overflow-tooltip>
            <el-table-column type="index" width="50" label="#" />
            <el-table-column prop="hostname" label="hostname" width="150" />
            <el-table-column prop="ip" label="IP" width="100" />
            <el-table-column prop="activeMAC" label="mac" width="120" />
            <el-table-column prop="biosSerial" label="bios序列号" />
            <el-table-column prop="hardDiskSerial" label="硬盘序列号" />
            <el-table-column prop="mainBoardSerial" label="主板序列号" />
            <el-table-column prop="assetCode" label="资产编号" />
            <el-table-column prop="isOnline" label="在线">
              <template #default="scope">
                <el-tooltip effect="dark" placement="top">
                  <template #content>
                    设备最后消息时间:{{
                      dayjs(new Date(scope.row.lastMsgTime * 1000)).format('YYYY-MM-DD HH:mm:ss')
                    }}
                  </template>
                  <el-tag :type="scope.row.isOnline ? 'success' : 'info'">{{
                    scope.row.isOnline ? '在线' : '离线'
                  }}</el-tag>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="180">
              <template #default="scope">
                <el-link
                  :icon="View"
                  class="mr-3"
                  type="primary"
                  @click="showLogDetailsDialog(scope.row)"
                  >详情</el-link
                >
                <el-link
                  :icon="ChatDotRound"
                  class="mr-3"
                  type="primary"
                  @click="showDrawerShow(scope.row)"
                  >通讯</el-link
                >
                <el-link
                  :icon="MoreFilled"
                  class="mr-3"
                  type="primary"
                  @click="clickMoreBtn(scope.row)"
                  >更多</el-link
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="mt-5"
            layout="prev, pager, next"
            :hide-on-single-page="pagination.total / pagination.pageSize < 2"
            :total="pagination.total"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped></style>
